﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="~/lib/layui/css/layui.css">
    <script type="text/javascript" src="~/lib/layui/layui.js"></script>
    <script src="~/plugin/jsonEditor/jquery.json-editor.min.js"></script>
    <script type="text/javascript" src="~/xadmin/js/Base.js"></script>

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            width: 80%;
            margin: 50px auto 100px;
        }

        #json-display {
            border: 5px solid #000;
            margin: 0;
            padding: 10px 20px;
            overflow:auto;
        }
    </style>
</head>
<body>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">项目名称</label>
                <div class="layui-input-block">
                    <input type="text" name="ItemName" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">版本</label>
                <div class="layui-input-block">
                    <input type="text" name="Version"  lay-verify="required|number" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文件名</label>
            <div class="layui-input-block">
                <input type="text" name="FileName" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">     
            </div>
        </div>
 
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">开发环境</label>
            <div class="layui-input-block">
                <input type="radio" name="Evn" value="0" title="开发" checked>
                <input type="radio" name="Evn" value="1" title="生产">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">配置信息</label>
            <div class="layui-input-block">
                <button id="translate" type="button" class="layui-btn layui-btn-xs" onclick="format()">格式化</button>
                <button id="reload" type="button" class="layui-btn layui-btn-xs" onclick="reload()">重置</button>
                <pre id="json-display"></pre>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" onclick="window.location.reload()" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        var editor = new JsonEditor('#json-display', JSON.parse("{}"));
        function reload() {
            editor.load(JSON.parse("{}"));
        }
        function format() {
            editor.load(editor.get());
        }
        layui.use(['form'], function () {
            var form = layui.form;  
            //监听提交
            form.on('submit(formDemo)', function (data) {
                data.field['Content'] = JSON.stringify(editor.get());
                console.log(JSON.stringify(editor.get()))
                BaseAjax(ajaxType.post, "/home/add", data.field, function (repo) {
                    if (repo.status == ajaxStatus.OK)
                        x_admin_close();
                })
                return false;
            });
        });
    </script>
</body>
</html>
